;(function(){
    var box=document.getElementById('box');
    var _name=document.getElementById('name');
    var message=document.getElementById('message');
    var btn=document.getElementById('btn');
    if(XMLHttpRequest)
    {
        var xhr=new XMLHttpRequest();
    }else{
        var xhr=new ActiveXObject();
    }
    xhr.open("GET","./php/getData.php?key="+Math.random(),true)
    xhr.send();
    getDate();

    function getDate(){
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200)
            {
                var json=JSON.parse(xhr.responseText);
                render(box,json);
            }
        }
    }

    function render(dom,obj){
        var html="";
        for(var i=0;i<obj.length;i++)
        {
            html+="<li><p>"+obj[i].name+"</p><div><span>"+obj[i].message+"</span><input type=\"hidden\" value=\""+obj[i].id+"\"/></div></li>";
        }
        box.innerHTML=html;
    }

    btn.onclick=function(){
        xhr.open("GET","./php/insert.php?key="+Math.random()+"&name="+_name.value+"&message="+message.value,true);
        xhr.send();
        getDate();
        _name.value="";
        message.value="";
    }

    box.onclick=function(event){
        e=event||window.event;
        target=e.target||e.srcElement;
        if(target.nodeName.toUpperCase()=="SPAN")
        {
            target.outerHTML="<input type=\"text\" value=\""+target.innerHTML+"\"><button class='btne'>确认修改</button><button class='btnd'>确认删除</button>";
        }
        if(target.className=="btne")
        {
            xhr.open("GET","./php/edit.php?key="+Math.random()+"&id="+target.nextSibling.nextSibling.value+"&message="+target.previousSibling.value,true);
            xhr.send();
            getDate();
        }
        if(target.className=="btnd")
        {
            xhr.open("GET","./php/del.php?key="+Math.random()+"&id="+target.nextSibling.value,true);
            xhr.send();
            getDate();
        }
    }

}())

